<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>CoolMeeting会议管理系统</title>
    <link rel="stylesheet" href="/style/common.css"/>
    <style>
        .red {
            color: red;
        }

        .green {
            color: green;
        }
    </style>
</head>
<body>
<div th:include="top"></div>
<div class="page-body">
    <div th:include="left"></div>
    <div class="page-content">
        <div class="content-nav">
            人员管理 > 员工注册
        </div>
        <form th:action="@{/doReg}" method="post">
            <fieldset>
                <legend>员工信息</legend>
                <table class="formtable" style="width:50%">
                    <tr>
                        <td>姓名：</td>
                        <td>
                            <input name="employeename" type="text" id="employeename" maxlength="20"/>
                        </td>
                    </tr>
                    <tr>
                        <td>用户名：</td>
                        <td>
                            <input name="username" type="text" id="accountname" maxlength="20"/>
                            <div id="checkUserName"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>密码：</td>
                        <td>
                            <input name="password" type="password" id="password" maxlength="20"
                                   placeholder="请输入6位以上的密码"/>
                        </td>
                    </tr>
                    <tr>
                        <td>确认密码：</td>
                        <td>
                            <input type="password" id="confirm" maxlength="20" onchange="check()"/>
                            <div id="confirm_msg" style="color:red;"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>联系电话：</td>
                        <td>
                            <input name="phone" type="text" id="phone" maxlength="20"/>
                        </td>
                    </tr>
                    <tr>
                        <td>电子邮件：</td>
                        <td>
                            <input name="email" type="text" id="email" maxlength="20"/>
                        </td>
                    </tr>
                    <tr>
                        <td>所在部门：</td>
                        <td>
                            <select name="departmentid">
                                <option th:if="${departments != null}"
                                        th:each="department:${departments}"
                                        th:value="${department.departmentid}"
                                        th:text="${department.departmentname}">
                                </option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="6" class="command">
                            <input type="submit" class="clickbutton" value="注册"/>
                            <input type="reset" class="clickbutton" value="重置"/>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </form>
    </div>
</div>
<div th:include="foot"></div>
<script>
    function check() {
        var password = document.getElementById("password").value;
        var confirm = document.getElementById("confirm").value;
        var confirm_msg = document.getElementById("confirm_msg");
        if (password !== confirm) {
            confirm_msg.innerHTML = "两次输入的密码不一致";
        } else {
            confirm_msg.innerHTML = "";
        }
    }

    // function checkOnlyByUserName() {
    //     var xmlhttp;
    //     if (window.XMLHttpRequest) {
    //         // code for IE7+, Firefox, Chrome, Opera, Safari
    //         xmlhttp = new XMLHttpRequest();
    //     } else {
    //         // code for IE6, IE5
    //         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    //     }
    //     xmlhttp.onreadystatechange = function () {
    //         if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
    //             var res = xmlhttp.responseText;
    //             if (res === '1'){
    //                 document.getElementById("checkUserName").innerHTML = "<span class='red'>该用户名已存在!</span>";
    //             }
    //             if (res === '0'){
    //                 document.getElementById("checkUserName").innerHTML = "<span class='green'>该用户名可以使用！</span>";
    //             }
    //             document.getElementById("checkUserName").focus();
    //         }
    //     }
    //     var str = document.getElementById("accountname").value;
    //     xmlhttp.open("GET", "/checkOnlyByUserName?username=" + str, true);
    //     xmlhttp.send();
    // }
</script>
</body>
</html>